<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 新增按钮跟红字说明 -->
        <div class="box">
          <span class="JGinfo">说明：目前支持学科和关键字条件的筛选</span>
          <el-button @click="toNews" type="success" class="el-icon-edit"> 新增试题</el-button>
        </div>
        <!-- 筛选区域 -->
        <el-form label-width="70px" class="select-box" :model="form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select placeholder="请选择" v-model="form.subjects" style="width:100%">
                  <el-option
                    :label="item.subjectName"
                    :value="item.subjectName"
                    v-for="item in sub_data"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select placeholder="请选择" v-model="form.two_directory" style="width:100%"> </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择" v-model="form.labels" style="width:100%"> </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input placeholder="根据题干搜索" v-model="form.keywords" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="form.que_type" style="width:100%">
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="item in questionType"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="form.difficultys" style="width:100%">
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="item in difficulty"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="form.directions" style="width:100%">
                  <el-option :label="item" :value="item" v-for="(item, key) in direction" :key="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select placeholder="请选择" v-model="form.userData" style="width:100%">
                  <el-option
                    :label="item.username"
                    :value="item.username"
                    v-for="item in user_data"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.titleRamke" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.companyName" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  @change="changeCity"
                  placeholder="请选择"
                  v-model="form.cityS"
                  style="width:48% ;margin-right:2%"
                >
                  <el-option :label="item" :value="item" v-for="(item, key) in provincess" :key="key"></el-option>
                </el-select>
                <el-select placeholder="请选择" v-model="form.countyS" style="width:50%">
                  <el-option :label="item" :value="item" v-for="(item, key) in cityss" :key="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="clearSearch">
                <el-button @click="clearSelect">清除</el-button>
                <el-button @click="SearchBtn" type="primary">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="-1"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>
        <el-alert :title="this.totals" :closable="false" show-icon></el-alert>
        <!-- 精选题库数据列表 -->
        <el-table :data="allChoice" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150"> </el-table-column>
          <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120"> </el-table-column>
          <el-table-column label="题型" width="120">
            <template v-slot="{ row }">
              {{ row.questionType | getQueType }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="250">
            <template v-slot="{ row }">
              {{ delHtmlTag(row.question) }}
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="200">
            <template v-slot="{ row }">
              {{ changeDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template slot-scope="scope">
              {{ scope.row.difficulty | getDifficulty }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120"> </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template slot-scope="scope">
              {{ scope.row.chkState | getChkType }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120"> </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120"> </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="openLook(scope.row)" type="text" size="small">浏览</el-button>
              <el-button
                @click="chkMethods(scope.row)"
                type="text"
                size="small"
                :disabled="scope.row.chkState == 0 ? false : true"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState == 0 ? false : true"
                @click="updateMethods(scope.row.id)"
                >修改</el-button
              >
              <el-button type="text" size="small">{{ scope.row.publishState == 0 ? '上架' : '下架' }}</el-button>
              <el-button type="text" size="small" :disabled="scope.row.publishState == 0 ? false : true"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="pagesizes"
          :page-size="pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <!-- 预览对话框 -->
      <el-dialog title="题目预览" :visible.sync="lookShow" :close-on-click-modal="false" :before-close="cancel">
        <el-form :model="lookForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="【题型】:">
                <template>{{ lookForm.questionType | getQueType }}</template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【编号】:">
                <template>{{ lookForm.id }}</template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【难度】:">
                <template>{{ lookForm.difficulty | getDifficulty }}</template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【标签】:">
                <template>{{ lookForm.tags }}</template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="【学科】:">
                <template>{{ lookForm.subjectName }}</template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【目录】:">
                <template>{{ lookForm.directoryName }}</template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【方向】:">
                <template>{{ lookForm.direction }}</template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form-item label="【题干】："></el-form-item>
          <div v-html="lookForm.question" class="quetTitle">
            <template>{{ lookForm.question }}</template>
          </div>
          <div :style="quesInfo">
            <template>{{ lookForm.questionType | getQueType }} 选项: (以下选中的选项为正确答案)</template>
          </div>
          <div>
            <el-radio-group v-model="radio" v-if="lookForm.questionType === '1'">
              <div class="radio" v-for="item in lookForm.options" :key="item.id">
                <el-radio :label="item.id">{{ item.title }}</el-radio>
              </div>
            </el-radio-group>
            <el-checkbox-group v-model="checkList" v-if="lookForm.questionType === '2'">
              <div class="radio" v-for="item in lookForm.options" :key="item.id">
                <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
          <el-divider></el-divider>
          <el-form-item label="【参考答案】:"
            ><el-button @click="videoOut" type="danger">视频答案预览</el-button></el-form-item
          >
          <div class="videodiv" :style="videoHide">
            <video :src="lookForm.videoURL" controls autoplay></video>
          </div>
          <el-divider></el-divider>
          <el-form-item label="【答案解析】:"
            ><div class="answerClass" v-html="lookForm.answer">{{ lookForm.answer }}</div></el-form-item
          >
          <el-divider></el-divider>
          <el-form-item label="【题目备注】:"
            ><template>{{ lookForm.remarks }}</template></el-form-item
          >
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="lookbtn" @click="cancel" type="primary">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 审核对话框 -->
      <el-dialog
        title="题目审核"
        :visible.sync="chkShow"
        width="400px"
        :close-on-click-modal="false"
        :before-close="chkCancel"
      >
        <template>
          <el-radio v-model="chk_radios" label="1">通过</el-radio>
          <el-radio v-model="chk_radios" label="2">拒绝</el-radio>
        </template>
        <el-input class="textareainput" type="textarea" :rows="2" placeholder="请输入审核意见" v-model="chk_textarea">
        </el-input>
        <div class="chkbtn">
          <el-button @click="chkCancel">取消</el-button>
          <el-button @click="chkUpdate" type="primary">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { questionType, difficulty, direction, chkType } from '@/api//hmmm/constants.js'
import { list as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice, detail, choiceCheck } from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      chk_row: '', //存点击审核窗口的那条携带ID的数据
      chk_textarea: '', //默认审核窗口的文本域
      chk_radios: '1', //默认审核窗口的选项
      chkShow: false, //控制审核窗口的显示与隐藏
      quesInfo: '', //当 为简答题的时候隐藏 题的提示信息
      videoHide: 'display:none', //控制video的显示和隐藏
      radio: '', //选中的单选题的ID
      checkList: [], //选中的的多选题ID
      lookShow: false, //控制预览对话框的显示与隐藏
      subSearch_id: null, //实现学科搜索的ID
      quesKeywords: null, //实现关键字搜索的内容
      chkState: null, //为了tabs标签页实现筛选的功能，在getAllchoice中需要默认参数，既解决created时期的获取，也解决tabs点击事件传入的值
      activeName: '-1', //默认tabs标签在‘全部’标签页
      current: 1, //分页符，默认第一页
      pagesizes: [5, 10, 20, 30], //分页符，表示一页几条数据选项
      pagesize: 5, //分页符，一页几条数据
      total: 0, //存获取列表总数
      totals: '', //提示信息条的 汇总信息
      allChoice: [], //存精选数据列表数据
      questionType, //存试题类型的内容
      difficulty, //存难度的内容
      direction, //存 方法 的内容
      chkType, //存审核状态
      sub_data: [], //存取到学科的值
      user_data: [], //存到录入人(用户名)的值
      provincess: [], //存到城市信息
      cityss: [], //存到区的信息
      form: {
        //存筛选框中选的值
        subjects: '', //学科
        two_directory: '', //二级目录
        labels: '', //标签
        keywords: '', //关键字
        que_type: '', //试题类型
        difficultys: '', //难度
        directions: '', //方向
        userData: '', //录入人(用户名)
        titleRamke: '', //题目备注
        companyName: '', //企业简称
        cityS: '', //城市
        countyS: '' //区
      },
      lookForm: {}
    }
  },
  created() {
    this.getSelList()
    this.getAllchoice()
  },
  methods: {
    //审核对话框确定事件
    async chkUpdate() {
      const chk_data = {
        id: this.chk_row.id,
        chkState: this.chk_radios == '1' ? 1 : 2,
        chkRemarks: this.chk_textarea
      }
      if (chk_data.chkRemarks == '') {
        return this.$message.warning('请输入审核意见')
      }
      await choiceCheck(chk_data)
      this.getAllchoice()
      this.$message.success('操作成功')
      this.chkShow = false
      this.chk_textarea = ''
      this.chk_radios = '1'
      this.chk_row = ''
    },
    //关闭审核窗口
    chkCancel() {
      this.chk_textarea = ''
      this.chk_radios = '1'
      this.chk_row = ''
      this.chkShow = false
    },
    //打开审核窗口
    chkMethods(row) {
      this.chkShow = true
      this.chk_row = row
    },
    //让预览框里的video出现
    videoOut() {
      this.videoHide = ''
    },
    //打开预览窗口
    async openLook(row) {
      this.lookShow = true
      const { data: res } = await detail(row)
      this.lookForm = res
      if (res.questionType == 1) {
        res.options.forEach(item => {
          if (item.isRight == 1) {
            this.radio = item.id
          }
        })
      } else if (res.questionType == 2) {
        res.options.forEach(item => {
          if (item.isRight == 1) {
            this.checkList.push(item.id)
          }
        })
      } else if (res.questionType == 3) {
        this.quesInfo = 'display:none'
      }
    },
    //关闭预览窗口
    cancel() {
      this.lookShow = false
      this.lookForm = {}
      this.radio = ''
      this.checkList = []
      this.videoHide = 'display:none'
      this.quesInfo = ''
    },
    //标签页点击事件
    async handleClick(tab, event) {
      this.current = 1
      this.chkState = tab.name == -1 ? null : tab.name
      this.getAllchoice()
    },
    //新建试题
    toNews() {
      this.$router.push('/questions/new')
    },
    //点击修改方法
    updateMethods(update_id) {
      this.$router.push('/questions/new', update_id)
    },
    // 页容量改变时会触发
    handleSizeChange(size) {
      this.pagesize = size
      this.getAllchoice()
    },
    // 当前页改变时会触发
    handleCurrentChange(current) {
      this.current = current
      this.getAllchoice()
    },
    //获取精选题库列表
    async getAllchoice() {
      const res = await choice({
        page: this.current,
        pagesize: this.pagesize,
        chkState: this.chkState,
        subjectID: this.subSearch_id,
        question: this.quesKeywords
      })
      this.allChoice = res.data.items
      this.total = res.data.counts
      this.totals = '数据一共 ' + this.total + ' 条'
    },
    //获取筛选界面所需的数据方法
    async getSelList() {
      //获取学科信息
      const { data: res } = await list({
        pagesize: 1000
      })
      this.sub_data = res.items
      // 获取录入人也就是用户名信息
      const { data: ress } = await userList()
      this.user_data = ress.list
      // 获取城市
      const rees = await provinces()
      this.provincess = rees
    },
    //清除按钮方法
    clearSelect() {
      this.subSearch_id = null
      this.quesKeywords = null
      this.getAllchoice()
      this.form = {
        subjects: '', //学科
        two_directory: '', //二级目录
        labels: '', //标签
        keywords: '', //关键字
        que_type: '', //试题类型
        difficultys: '', //难度
        directions: '', //方向
        userData: '', //录入人(用户名)
        titleRamke: '', //题目备注
        companyName: '', //企业简称
        cityS: '' //城市
      }
    },
    //搜索按钮的方法
    async SearchBtn() {
      this.sub_data.find(item => {
        if (item.subjectName == this.form.subjects) {
          return (this.subSearch_id = item.id)
        }
      })
      this.quesKeywords = this.form.keywords == '' ? null : this.form.keywords
      const res = await choice({
        page: this.current,
        pagesize: this.pagesize,
        chkState: this.chkState,
        subjectID: this.subSearch_id,
        question: this.quesKeywords
      })
      this.allChoice = res.data.items
      this.totals = '数据一共 ' + res.data.counts + ' 条'
    },
    //市区联动方法
    async changeCity() {
      const res = await citys(this.form.cityS)
      this.cityss = res
      this.form.countyS = ''
    },
    //去掉所有的html标记
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g, '')
    },
    //修改日期格式的方法
    format(time, format) {
      var t = new Date(time)
      var tf = function(i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
            break
          case 'MM':
            return tf(t.getMonth() + 1)
            break
          case 'mm':
            return tf(t.getMinutes())
            break
          case 'dd':
            return tf(t.getDate())
            break
          case 'HH':
            return tf(t.getHours())
            break
          case 'ss':
            return tf(t.getSeconds())
            break
        }
      })
    },
    //调用format方法实现时间格式化
    changeDate(times) {
      return this.format(times, 'yyyy-MM-dd HH:mm:ss')
    }
  },
  filters: {
    getQueType: function(value) {
      const obj = questionType.find(item => {
        return item.value == value
      })
      return obj ? (obj.label == '单选' ? '单选题' : obj.label == '多选' ? '多选题' : '简答题') : ''
    },
    getDifficulty: function(value) {
      const obj = difficulty.find(item => {
        return item.value == value
      })
      return obj ? obj.label : ''
    },
    getChkType: function(value) {
      const obj = chkType.find(item => {
        return item.value - 1 == value
      })
      // return obj ? obj.label : ''
      // const objj = obj ? obj.label : ''
      // if (objj == '待审核') {
      //   return objj
      // } else if (objj == '通过') {
      //   return '已审核'
      // } else if (objj == '拒绝') {
      //   return '已拒绝'
      // } else {
      //   return ''
      // }
      return obj
        ? obj.label == '待审核'
          ? obj.label
          : obj.label == '通过'
          ? '已审核'
          : obj.label == '拒绝'
          ? '已拒绝'
          : ''
        : ''
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .box {
    display: flex;
    justify-content: space-between;
    .JGinfo {
      font-size: 10px;
      color: pink;
    }
  }
  .select-box {
    margin-top: 15px;
  }
  .clearSearch {
    float: right;
  }
  .pagination {
    float: right;
    margin-top: 20px;
  }
  .quetTitle {
    color: blue;
    margin-top: -20px;
  }
  .radio {
    margin: 10px 0;
  }
  .answerClass {
    margin-top: -15px;
  }
  .dialog-footer {
    position: relative;
    .lookbtn {
      position: absolute;
      top: -35px;
      right: 15px;
    }
  }
  .textareainput {
    margin: 25px 0 50px 0;
  }
  .chkbtn {
    text-align: right !important;
  }
}
</style>
